// 初窥编译原理
// 1、探索编译概念
// 2、编译在前端的使用（vue+react+angular中的编译+前端工程化webpack，vite）
// 3、mini编译器(the-super-tiny-compiler)的代码分享解读
// 4、编译原理在业务中的应用场景（移除不需要的console）

// 讲稿
// 一、在开始之前我们需要声明两点
//      1.编译本身不属于前端开发领域的问题,第一次接触感觉难懂是很正常的,放轻松
//      2.但是编译对于编程来说是非常重要的一环,你写的每一行代码都必须经过编译之后才能被机器执行

// 二、因为编译概念，本次就跟着我的发现，探索编译的步伐一起来了解编译
//      事情还得从2022年的12月份, 罗找到我, 年初规划了一个CBB需要搭建一个组件库, 遇见两个问题
// 1、演示代码高亮
//      我们编写的演示代码需要像elemen_UI、NG_ZORRO一样展示出来，但是直接放源代码在dom元素里面很难看
//      我在掘金上找到highlightJS用于格式化展示代码，发现highlightJS居然是将代码块进行切割后加上不同的css类名进而染色
//      我不明白这是怎么做到的，唯一的感觉是highlightJS对代码进行了切割，区分成不同的模块加上类名: hljs-keyword、hljs-number 等

// 2、2023年1月份我们组内学习Typescript
//      1、TS和我之前接触的编程语言不一样：C,C++,JAVA等都是直接运行，但是TS运行时居然是编译到JS之后才跑起来的（tsc hello.ts） => hellow.js
//      2、除了tsc能够编译ts以外，babel也能够编译ts（https://babeljs.io/docs/babel-preset-typescript）
//      我不明白，但是我大受震撼，
//      1、将原本不属于js的语法转化为js
//      2、除了TS官方发布的tsc编译，babel社区方案也可以编译TS

// 三、前端工程化
//      领域拉通我有机会接触到angular、此时我已经触及到 react、angular、vue这三大前端框架
//      我获得了新的视角：都是描述网页，三大框架各有各的玩法，模板语法，jsx，面向对象，函数式 等概念
//      html：
//           react里面有jsx，angular模板语法、vue有模板语法，vue也通过babel插件支持jsx、vue的模板语法支持插件（lang = pug：https://juejin.cn/post/6844904039923073038）
//      js：
//           js, ts, jsx, tsx 都是babel编译的
//           angular_cli(https://github.com/angular/angular-cli/blob/main/package.json)
//           create-react-app(https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/package.json)
//           vue-cli(https://github.com/vuejs/vue-cli/blob/dev/package.json)
//      css:百花齐放
//           less，sass，stylus，css modules, style-component、Tailwind CSS、UnoCSS 等...
//      从细节上来说 三大框架使用webpack、vite等打包器将不同的解决方进行编译、最终输出的都是html，css，js

// 四、我们讲到这里大家也能感觉到正如我们开局所述：编译对开发来说有多么重要
//    介绍一下万恶之源：babel（https://babeljs.io/）【展示npm下载量】
//      babel 最开始叫 6to5，顾名思义是 es6 转 es5，但是后来随着 es 标准的演进和前端生态的发展可以转化的越来越多：
//      1、esNext ，ts，flow，jsx， tsx 等语法转化
//      2、一些特定用途的代码转换（webpack内部的commonjs,esModule的转化）
//      3、代码的静态分析 (eslint)
//      babel怎么这么厉害，官网上有一个连接：
//      有关编译器的精彩教程，请查看the-super-tiny-compiler，它还解释了 Babel 本身如何在高层次上工作
//      那么我们就跟着babel的指引窥探一下编译的世界吧

// 五、编译基础知识铺垫
//      1、老师讲过C语言的编译流程
//           c语言，丰富的抽象和便捷的语法结构，够以接近自然语言的方式表达复杂的逻辑。可读性强，易于维护
//           汇编语言是介于高级语言和机器码之间的一种低级语言。直接操作寄存器、内存地址和位操作，提供了对硬件的精细控制。难度较高，且通常不具有跨平台性
//           机器码是计算机硬件可以直接执行的二进制指令序列。由0和1的位序列组成。缺乏可读性和可维护性。机器码的执行效率是最高的
//        高级C语言举例子：
//           1.顺序结构：程序按照代码的书写顺序逐行执行（从上往下）
//           2.分支结构：if-else
//           3.循环结构：for循环，while循环，do-while循环
//           跳转语句：break：立即终止最近的循环，continue：跳过当前循环。return：用于从函数中返回
//           选择表达式：?:（三元运算符）：++i
//         机器码的执行通常是线性的
//      2、大部分编译器的工作可以被分解为三个主要阶段：
//          解析（Parsing）： 词法分析和语法分析生成 AST(abstract syntax tree)描述源码的逻辑关系
//          转化（Transformation） ：遍历AST进行语法转化，比如：1、TSC就是将ts的语法树转化为js的语法树，2、GCC将c语言的语法树转化为汇编语言语法树
//          代码生成（Code Generation）。 基于目标语法树生成目标代码 （比如：ts变成js）
//      3、编译器的类型
//          静态编译器：如C、C++编译器，它们在程序执行前将源代码编译成机器代码。
//          动态编译器：如 JIT（Just-In-Time）编译器，它们在程序运行时将源代码编译成机器代码。
//          源到源编译器：如Babel，它们将一种源代码转换成另一种源代码（如TypeScript到JavaScript）。
// 六、mini编译器(the-super-tiny-compiler)[https://gitee.com/coderzjd/thesupertinycompiler/blob/master/complier.js]
//    1、访问者模式
// 七、astexplorer（https://astexplorer.net/）
//      可以查看各种各样的ast语法树： css，html，markdown，java ，js ,vue 等语法
// 八、基于AST的优化
//      1、C语言的自编译能力、讨论图灵完备性
//           C语言的编译器GCC是由C语言写的，为什么C语言可以编译C语言，在C语言发明之前，C语言是由谁编译的???
//           讲一下图灵机，图灵完备
//           C语言是图灵完备的所以C语言可以编译自己
//           JS也是图灵完备的所以JS语言可以编译自己 > babel 是用js写的可以编译js
//      2、编写babel插件移除conosole
//           export default function (babel) {
//             const { types: t } = babel
//             return {
//               name: 'removeConosleLog',
//               visitor: {
//                 //通过访问者模式访问函数调用语句
//                 CallExpression(path) {
//                   // 函数调用者是一个成员表达式
//                   if (t.isMemberExpression(path.node.callee)) {
//                     // 被调用者是console
//                     if (path.node.callee.object.name === 'console') {
//                       // 调用的属性是log
//                       if (path.node.callee.property.name === 'log') {
//                         // 在ast树上移除该节点
//                         path.remove()
//                       }
//                     }
//                   }
//                 },
//               },
//             }
//           }
// 九、基于AST的深度应用
//      1、Tree Shaking
//      2、代码压缩，丑化terser
//      3、(a+b)^2 = a^2 +2ab+b^2
//      4、尾递归优化
// 十、创造一门语言（https://craftinginterpreters.com/contents.html）
